/*
  学习目标：使用shouldComponentUpdate决定是否更新

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 0,
    msg: 'hello React',
    list: [],
  };

  render() {
    const { count, msg, list } = this.state;
    return (
      <div>
        <h1>{count}</h1>
        <h1>{msg}</h1>
        <button onClick={() => this.setState({ count: count + 1 })}>
          点我修改count
        </button>

        <button onClick={() => this.setState({ msg: msg + '~' })}>
          点我修改msg
        </button>
        <button onClick={() => this.setState({ list: [...list, 1] })}>
          点我修改list
        </button>
        <Child count={count} msg={msg}></Child>
      </div>
    );
  }
}

// PureComponent内部实现了shouldComponentUpdate， 会自动比较props的变化， 决定是否更新
class Child extends React.PureComponent {
  render() {
    const { count, msg } = this.props;
    console.log('render被重新执行了  ----->  ');
    return (
      <div>
        Child - {count} - {msg}
      </div>
    );
  }
}
